<template>
  <div class="content-container">
    <div class="top">
      <el-card class="box-card">
        <div class="xueke">总答题数量</div>
        <span class="el-icon-warning"></span>
        <answer-num class="transverse-line"></answer-num>
        <div class="textspan">日答题数量 12,423</div>
      </el-card>
      <el-card class="box-card">
        <div class="xueke">试题方向</div>
        <span class="el-icon-warning"></span>
        <test-direction></test-direction>
        <div class="textspan">试题库数量 10,234</div>
      </el-card>
      <el-card class="box-card">
        <div class="xueke">试题学科分布</div>
        <span class="el-icon-warning"></span>
        <test-subject></test-subject>
        <div class="textspan">前端试题数量 5,234</div>
        <!-- 卡片视图区域 -->
        <div id="main" style="width:750px;height:400px;"></div>
      </el-card>
      <el-card class="box-card bottomBox">
        <div class="xueke">上周试题新增</div>
        <span class="el-icon-warning"></span>
        <test-add></test-add>
        <div class="textspan">上周新增总量 1,234</div>
      </el-card>
    </div>
    <!-- 前端与java学科试题走势图 -->
    <front-java></front-java>
  </div>
</template>
<script>
import answerNum from './components/answer-num'
import testDirection from './components/test-direction'
import testSubject from './components/test-subject'
import testAdd from './components/test-add'
import frontJava from './components/front-java'
export default {
  name: 'ContentContainer',
  components: {
    answerNum,
    testDirection,
    testSubject,
    testAdd,
    frontJava
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.content-container {
  // padding: 10px;
  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .box-card {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    // padding: 0 20px;
    width: 360px;
    height: 250px;
  }
  .bottomBox {
    margin-right: 0px;
  }
  .xueke {
    margin-top: -8px;
    padding-bottom: 10px;
    color: #97a8be;
  }
  .el-icon-warning {
    position: absolute;
    right: 30px;
    top: 17px;
    color: #97a8be;
  }
  .textspan {
    margin-top: 5px;
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
    font-size: 15px;
  }
  .front-end {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgb(153, 153, 153);
  }
}
</style>
